<template>
    <div class="main">
        <div class="bigBox">
            <div class="welcome">{{ displayedText }}
                <div class="music">
                    <img v-show="isPlay" @click="play()" :src="player" class="music-spin"/>
                    <img v-show="!isPlay" @click="play()" :src="pause" style="width: 100%;height: 100%;"/>
                    <audio ref="audioElement" :src="musicSrc" loop></audio>
                </div>
            </div>
            <div class="top">
                <wave></wave>
            </div>
            <div class="body">
                <div class="body-left">
                    <div class="body-left-one">
                        <div class="info-avatar"><img style="width: 100%;height: 100%;" :src="user.avatarUrl"/></div>
                        <div class="infoBox">
                            <div class="info-name">顶感kkkkkkkkkkkkkkkkkkkkkkkkkkkkk觉合金钢脚后跟脚后跟脚后跟机构行家顶顶</div>
                            <div class="info-say">撒旦发射点呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃而成为成为</div>
                        </div>
                    </div>
                    <div class="body-left-two"></div>
                </div>
                <div class="body-right">
                     <content></content>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import wave from '../../components/modules/wave.vue';
import content from '@/views/home/content/content.vue'
import player from '@/assets/icon/player.png'
import pause from '@/assets/icon/pause.png'
import { ref, onMounted } from 'vue'
import { parseJwt } from '../../stores/pinia.js';
import useCounter from '../../stores/pinia.js'

const isPlay=ref(true)
const counterStore=useCounter()
const audioElement=ref()
const fullText = '哦空空空空刚刚韩国汉城v常参与此次一同参与汉语方言从v体育产业推迟一天就看!'
const displayedText = ref('')
let index = 0
const user=ref({
  id:null,
  userName:'',
  avatarUrl:'https://www.toopic.cn/public/uploads/small/169139790585716913979057.jpg'
})

const typeWriter=()=> {
  if(index < fullText.length) {
    displayedText.value += fullText.charAt(index)
    index++
    setTimeout(typeWriter, 250)
  }
}

const play=()=>{
    isPlay.value=!isPlay.value
    if(isPlay.value===true){
        audioElement.play
        audioElement.volume
    }else{
        audioElement.pause
    }
}

onMounted(() =>
 {
    if(counterStore.jwt){
  user.value.avatarUrl=parseJwt(counterStore.jwt).imageUrl
  user.value.id=parseJwt(counterStore.jwt).id
}else{
  router.push('/')
}
  typeWriter()
})

</script>

<style scoped>
.main{
    width: 100%;
    height: 100%;
    /* background-color: yellowgreen; */
    overflow: auto;
    position: relative;
    background-image: url(../../assets/picture/header.jpg);
    background-size: cover;
    /* 添加动画属性 */
    animation: slideDown 1.5s ease-in-out forwards;
}
/* 定义动画 */
@keyframes slideDown {
    from {
        background-position:center -60px; /* 初始位置向上30px */
    }
    to {
        background-position:center 0px; /* 向下移动60px，相对于初始位置实际上只移动了30px */
    }
}
.welcome{
    max-width: 300px;
    height: fit-content;
    background-color: rgba(255, 255, 255, 0.336);
    position: absolute;
    margin-left: calc(50% - 150px);
    margin-top: -8%;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
  font-family: 'huawenxingkai';
  font-size: larger;
  padding-right: 35px;
}
.music{
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: rgba(9, 151, 233, 0.425);
    position: absolute;
    border-radius: 50%;
    top: -15px;
    right: -15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-spin{
    width: 100%;
    height: 100%;
    animation: music 2s linear infinite;  
}
@keyframes music {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.bigBox{
    width: 100%;
    height: fit-content;
    /* overflow: auto; */
    z-index: 111;
    display: flex;
    flex-direction: column;
    padding-top: 20%;
    /* background-color: aliceblue; */
}
.top{
    width: 100%;
    height: 150px;
    /* background-color: yellowgreen; */
    /* z-index: 99999; */
}
.body{
    width: 100%;
    /* margin-top: 150px; */
    height: fit-content;
    /* height: 400px; */
    background-color: rgb(255, 255, 255);
    position: relative;
    display: flex;
    flex-direction: row;
}
.body-left{
    width: 24%;
    height: fit-content;
    background-color: rgba(209, 209, 209, 0.233);
    margin: 0 0 10px 30px;
    border-radius: 8px;
    top:-20px;
    /* position: absolute; */
    padding: 15px;
}
.body-left-one{
    width: 100%;
    height: 85px;
    /* background-color: blue; */
}
.info-avatar{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: antiquewhite;
    position: absolute;
    overflow: hidden;
    left:35px;
    top: -50px;
    box-shadow: -5px 5px 12px rgba(0, 0, 0, 0.555);
}
.infoBox {
  width: calc(63% - 16px);
  background-color: rgb(78, 133, 133);
  padding: 8px;
  float: right;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px; /* 可选：增加 info-name 和 info-say 的间距 */
}

.info-name {
  width: 100%;
  height: 24px;
  max-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
  /* background-color: aliceblue; */
  font-size: 14px;
  line-height: 24px; /* 垂直居中 */
}

.info-say {
  width: 100%;
  /* max-height: 60px; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 20px;
  /* background-color: #f0f0f0; */
}
.body-left-two{
    width: 100%;
    height: 600px;
    background-color: aqua;
    margin-top: 15px;
    border-radius: 8px;
}
.body-right{
    width: calc(76% - 120px);
    height: fit-content;
    background-color: rgba(209, 209, 209, 0.233);
    border-radius: 8px;
    /* justify-content: end; */
    /* justify-content: flex-end; */
    /* float: right; */
    margin-left: 15px;
    padding: 15px 15px 0 15px;
}
</style>